<template>
  <div class="common-layout">
    <el-container>
      <el-aside style="padding: 15px;">
        <div class="profileaside">
          <div style="display: flex;justify-content: space-between;">
            <div>Your Profile</div>
            <div>
     
            </div>
          </div>
          <div style="width: 100%;justify-content: center;display: flex;margin-top: 35px;">
            <img style="width: 60px;height: 60px;border-radius: 50px;" :src="user.avatar?user.avatar:'https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg'" />
          </div>
          <div style="width: 100%;justify-content: center;display: flex;margin-top: 10px;">
           {{ getGreeting()}},{{ " "+user.nickName }}
          </div>
       
          <div style="width: 100%;display: flex;justify-content: space-evenly;margin-top: 15px;">
            <div class="circle">
              <svg t="1721665969970" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="20021" width="15" height="15">
                <path
                  d="M907.74 711.67l-80.239-106.055V407.459c0-90.451-30.953-174.37-87.216-236.15-33.237-36.6-73.262-63.557-118.995-80.366-4.186-24.23-16.238-46.367-34.379-62.923-40.976-37.36-108.846-37.36-149.695 0-18.395 16.682-30.447 38.82-34.57 62.986-45.67 16.682-85.694 43.64-118.931 80.303-56.2 61.908-87.216 145.826-87.216 236.087l0.253 197.838-79.668 105.421c-11.227 11.989-17.38 27.529-17.38 43.83v51.57c0 35.33 28.734 64 64.001 64h696.653c35.33 0 63.938-28.67 63.938-64v-51.57c0-16.301-6.153-31.841-16.555-42.815zM546.126 74.26c-9.45-0.824-24.674-2.473-33.998-2.473-9.324 0-25.182 1.586-34.57 2.474 15.858-25.88 56.707-21.122 68.568 0zM164.593 806.055l-0.127-51.188 79.669-105.42c11.1-11.99 17.316-27.466 17.316-43.831v-198.22c0-74.212 24.991-142.654 70.28-192.636 22.455-24.738 48.969-43.894 78.717-57.088 62.479-27.782 141.069-27.782 203.42 0 29.813 13.32 56.263 32.54 78.654 57.151 45.353 49.983 70.28 118.36 70.28 192.637V605.615c0 16.428 6.153 32.096 16.556 42.879l80.302 105.991 0.635 50.871-695.702 0.698z m427.202 91.53c-4.82 11.227-11.798 21.376-21.059 29.812-32.095 29.241-85.186 29.178-117.092 0.063-9.197-8.5-16.301-18.712-21.122-29.875h-67.616c6.913 29.685 22.454 56.77 45.225 77.575 27.846 25.626 64.128 39.707 102.186 39.707 37.995 0 74.277-14.081 102.06-39.58 22.77-20.805 38.311-47.89 45.225-77.639l-67.807-0.063z"
                  fill="#000000" p-id="20022"></path>
              </svg>
            </div>

            <div class="circle">
              <svg t="1721666273199" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="21114" width="15" height="15">
                <path
                  d="M893.842 217.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z"
                  fill="#000000" p-id="21115"></path>
              </svg>
            </div>
            <div class="circle">
              <svg t="1721666273199" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="21114" width="15" height="15">
                <path
                  d="M893.842 217.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z"
                  fill="#000000" p-id="21115"></path>
              </svg>
            </div>
          </div>
          <div>
            <BarChart />
          </div>

      
        </div>
      </el-aside>
      <el-container style="padding-top: 15px;">
        <el-header style="height: 200px;">
          <div class="map">
         
            <div id="containermap"></div>
          </div>
        </el-header>
        <el-main >
          <h6 style="margin-top: 25px;">Your Plans</h6>
          <Plans style="margin-top: 10px;width: 100%;" :queryParam="plansParam"></Plans>
          <h6 style="margin-top: 25px;" >Your Guides</h6>
          <Plans style="margin-top: 10px;width: 100%;" :queryParam="GuidParam"></Plans>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
  import BarChart from '@/components/Profile/echarts.vue';
  import Plans from "@/components/Profile/myPlans.vue"
  import { userGuidList } from '@/api/index'
  import { removeToken } from '@/utils/auth'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router';
  // import Map from '@/components/Map/index.vue';
  import { onMounted, onUnmounted } from "vue";
  import AMapLoader from "@amap/amap-jsapi-loader";
  import { setToken,setUser,getUser } from '@/utils/auth'
  import { useStore } from 'vuex';
const store = useStore();
  store.commit('setFalseGuidEdit');
  const user = getUser();
const routers =useRouter();
  const center = { lat: 39.984120, lng: 116.307484 }
  const zoom = ref(10);
  const doubleClickZoom = ref(true);
  const control = ref({
    scale: {},
    zoom: {
      position: 'bottomRight',
    },
  })

const now = new Date();
const hours = now.getHours();
const getGreeting = () => {
  if (hours < 12) {
    return 'Good morning';
  } else if (hours < 18) {
    return 'Good afternoon';
  } else {
    return 'Good evening';
  }
};
  // let map = null;
  AMapLoader.load({
    key: "db17a89f9c977760ebb6a8ca01e092b8", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {


    let map = new AMap.Map("containermap", {
        // 设置地图容器id
        zoom: 11, // 初始化地图级别
      
      });
      let geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // 是否使用高精度定位，默认：true
    timeout: 10000, // 设置定位超时时间，默认：无穷大
    offset: [10, 20],  // 定位按钮的停靠位置的偏移量
    zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    position: 'RB' //  定位按钮的排放位置,  RB表示右下
  })

  // geolocation.getCurrentPosition(function(status,result){
  //       if(status=='complete'){
  //           // onComplete(result)
  //       }else{
  //           // onError(result)
  //       }
  // });
    })
    .catch((e) => {
      console.log(e);
    });
    onUnmounted(() => {
    // map?.destroy();
  });

  //获取用户所在城市信息
  function showCityInfo() {
       
    }
    showCityInfo();
  const plansParam = ref({
      page:0,
      size:10,
      attribute:user.email
  })
  const GuidParam = ref({
      page:0,
      size:3,
      type:"0",
      attribute:user.email
  })

  function exit() {
    removeToken()
    window.location.href = "/"
    // routers.push("/")
  }


</script>
<style scoped>
    #containermap {
    width: 100%;
    height: 218px;
  }
  .circle {
    width: 30px;
    height: 30px;
    border: 1px solid #000000;
    /* 边框颜色和宽度 */
    border-radius: 50%;
    /* 圆形边框 */

    display: flex;
    align-items: center;
    /* 垂直居中图标 */
    justify-content: center;
    /* 水平居中图标 */
  }

  .common-layout {
    background-color: #fff;
    /* padding: 15px; */
    font-size: 15px;
    color: #000;
  }

  .profileaside {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 6px 20px 0px rgb(206 206 206 / 27%);
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }

  .map {
    width: 100%;
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    /* 确保圆角效果应用于内部 */
  }

  .el-header {
    /* border-radius: 15px; */
    --el-header-padding: 0 20px;
    --el-header-height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
    /* height: var(--el-header-height); */
    padding: var(--el-header-padding);
  }
</style>